<template>
  <el-dialog
    :title="task.name"
    :close-on-click-modal="false" width="1100px"
    :visible.sync="visible">
    <div id="path-map" class="path-map" v-show="task.taskStatus === '1' || task.taskStatus === '2'"></div>
    <el-table :data="dataList" border stripe style="width: 100%; margin-top: 12px;" :max-height="200" size="small">
      <el-table-column prop="status" header-align="center" align="center" label="操作" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">{{ statusMap[scope.row.status] }}</template>
      </el-table-column>
      <el-table-column prop="createUserId" header-align="center" align="center" label="司机姓名" min-width="110" show-overflow-tooltip>
        <template slot-scope="scope">{{ userMap[scope.row.createUserId + ''] }}</template>
      </el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="操作时间" min-width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="prePic" header-align="center" align="center" label="收运前图片" width="120">
        <template slot-scope="scope">
          <el-image fit="fill" style="width: 80px; height: 80px;" v-if="scope.row.prePic"
            :src="baseUrl + scope.row.prePic" :preview-src-list="[baseUrl + scope.row.prePic]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="afterPic" header-align="center" align="center" label="收运后图片" width="120">
        <template slot-scope="scope">
          <el-image fit="fill" style="width: 90px; height: 90px;" v-if="scope.row.afterPic"
            :src="baseUrl + scope.row.afterPic" :preview-src-list="[baseUrl + scope.row.afterPic]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="remark" header-align="center" align="center" label="备注" min-width="160" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="lat" header-align="center" align="center" label="纬度" min-width="100">
      </el-table-column>
      <el-table-column prop="lon" header-align="center" align="center" label="经度" min-width="100">
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  props: {
    containerList: {
      type: Array,
      default: () => []
    },
    carList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    userMap: {
      get () { return this.$store.state.user.userMap }
    }
  },
  data () {
    let baseUrl = location.protocol + '//'
    if (location.hostname === '192.168.56.1' || location.hostname === 'localhost') {
      baseUrl = baseUrl + location.hostname + ':8080'
    } else {
      baseUrl = baseUrl + location.host
    }
    return {
      visible: false,
      baseUrl: baseUrl,
      task: {},
      map: null,
      marker: null,
      satellite: new AMap.TileLayer.Satellite(),
      roadNet: new AMap.TileLayer.RoadNet(),
      defaultLayer: AMap.createDefaultLayer(),
      carImg0: require("@/assets/img/map/car0.png"),
      carImg1: require("@/assets/img/map/car1.png"),
      carImg2: require("@/assets/img/map/car2.png"),
      carImg3: require("@/assets/img/map/car3.png"),
      statusMap: {
        '0': '同意收运',
        '1': '拒绝收运',
        '2': '收运完成'
      },
      dataList: []
    }
  },
  methods: {
    init (taskId) {
      this.visible = true
      this.$nextTick(_ => {
        this.map = new AMap.Map('path-map', {
          rotateEnable: false,
          showBuildingBlock: true,
          center: [120.145407,35.927715],
          zoom: 12,
          // layers: [
          //   this.defaultLayer
          // ]
        })
        this.map.on('complete', () => {
          this.getTaskInfo(taskId)
        })

        this.getOper(taskId)
      })
    },
    getTaskInfo (taskId) {
      this.$http({
        url: this.$http.adornUrl(`/sign/signtask/info/${taskId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.task = data.signTask
          if (this.task.path) {
            const lineArr = JSON.parse('[' + this.task.path + ']')
            if (this.marker) {
              this.map.remove(this.marker)
              this.marker = null
            }
            this.marker = new AMap.Marker({
              map: this.map,
              position: lineArr[0],
              icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
              offset: new AMap.Pixel(-13, -26),
            })

            // 绘制轨迹
            const polyline = new AMap.Polyline({
              map: this.map,
              path: lineArr,
              showDir:true,
              strokeColor: "#28F",  //线颜色
              // strokeOpacity: 1,     //线透明度
              strokeWeight: 6,      //线宽
              // strokeStyle: "solid"  //线样式
            });

            const passedPolyline = new AMap.Polyline({
              map: this.map,
              strokeColor: "#AF5",  //线颜色
              strokeWeight: 6,      //线宽
            })

            this.marker.on('moving', e => {
              passedPolyline.setPath(e.passedPath);
              // this.map.setCenter(e.target.getPosition(), true)
            })

            this.map.setFitView()

            setTimeout(() => {
              this.marker.moveAlong(lineArr, {
                // 每一段的时长，可根据实际采集时间间隔设置
                duration: 500,
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true
              })
            }, 2000)
          } else {
            // this.$message.warning('未查询到轨迹')
          }
        }
      })
    },
    getOper(taskId) {
      this.$http({
        url: this.$http.adornUrl(`/sign/signtaskoperation/list/${taskId}`),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data
        } else {
          this.dataList = []
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.path-map {
  width: 100%;
  height: 580px;
  background-color: #f5f5f5;
}
</style>
